<template>
  <div id="box" v-if="prolist">
    <!-- 导航栏 -->
    <van-nav-bar placeholder title="我的作品" fixed>
      <template #left>
        <van-icon
          name="revoke"
          color="#fdc03a"
          size="25"
          @click="$router.go(-1)"
        />
      </template> 
    </van-nav-bar>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh">
      <!-- 用户喜欢 -->
      <div class="userprojection">
        <van-swipe-cell v-for="item in prolist" :key="item.lid">
          <div class="prolist" @click="$router.push(`/detail?id=${item.lid}`)">
            <span class="pro_pic">
              <img :src="`http://39.108.211.154${item.limg}`" />
            </span>
            <span class="pro_detail">
              <div class="pro_title">《{{ item.title }}》</div>
              <div class="pro_place">地点: {{ item.lname }}</div>
              <div class="pro_date">
                <span>发布日期：{{ item.ldate.slice(0, 10) }}</span>
              </div>
            </span>
          </div>
          <template #right>
            <van-button
              @click="detele(item.lid)"
              square
              text="删除"
              type="danger"
              class="delete-button"/>
          </template>
        </van-swipe-cell>

        <!-- 没有内容的默认图片 -->
        <van-empty
          v-if="prolist.length == 0"
          image-size="250px"
          description="空空如也"
        />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>

import { Toast } from "vant";
import { Dialog } from 'vant';

export default {
  data() {
    return {
      isLoading: false,
      userdetail: null,
      prolist: null,
    };
  },
  mounted() {
    this.axios.get(`http://39.108.211.154:8080/user_username?username=${this.$store.state.user}`).then((res) => {
      this.userdetail = res.data[0];
      this.axios.get(`http://39.108.211.154:8080/me_publish_text?l_uname=${this.userdetail.uname}`).then((res) => {
        this.prolist = res.data;
        console.log('我的作品:', this.prolist);
      });
    });
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.$router.go(0);
      }, 1000);
    },
    detele(i) {
      Dialog.confirm({
        message: "您确定要删除么?",
        width: '70vw',
        confirmButtonText: '删除',
      }).then(() => {
        // 删除文章详情
        this.axios.get(`http://39.108.211.154:8080/del_text_detail?did=${i}`).then((res) => {
            console.log("文章详情", res);
            // 删除文章详情
          this.axios.get(`http://39.108.211.154:8080/del_text_list?lid=${i}`).then((res) => {
              console.log("文章列表", res);
            this.$router.go(0);
            Toast.success('删除成功');
          });
        });
      })
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  background-color: rgb(249, 249, 249);
}
::v-deep.van-pull-refresh{
  min-height: calc(100vh - 46px);
  margin-top: 5px;
}
.van-button {
  height: 100%;
}
.userprojection {

  .prolist {
    background-color: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px 12px;
    width: 100%;
    display: flex;
    .pro_pic {
      width: 42%;
      height: 26vw;
      border-radius: 2vw;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .pro_detail {
    width: 58%;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .pro_title {
      color: black;
      font-size: 4vw;
    }
    .pro_place{
      color: rgb(255, 145, 0);
      font-size: 3vw;
    }
    .pro_date{
      font-size: 3.5vw;
    }
  }
}
</style>